/**
 * 采购管理 采购订单
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>采购管理</el-breadcrumb-item>
      <el-breadcrumb-item>采购订单</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="搜索：">
        <el-input
          size="small"
          v-model="formInline.Name"
          placeholder="请输入商品名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="订单日期">
        <el-date-picker
          v-model="formInline.BeginTime"
          type="datetime"
          placeholder="选择开始日期时间"
        >
        </el-date-picker>
         <el-date-picker
          v-model="formInline.EndTime"
          type="datetime"
          placeholder="选择结束日期时间"
        >
        </el-date-picker>
      </el-form-item>
      <!-- <el-form-item label="交货日期">
       
      </el-form-item> -->
      <el-form-item>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="search"
          >搜索</el-button
        >

        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          @click="OpenDialog1()"
          >录入计划</el-button
        >
        <!-- <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          @click="TestClick()"
          >测试</el-button
        > -->
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table
      size="small"
      :data="listData"
      highlight-current-row
      v-loading="loading"
      border
      element-loading-text="拼命加载中"
      style="width: 100%"
    >
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column sortable prop="id" label="采购订单单号" width="150">
      </el-table-column>
      <el-table-column sortable prop="supplierName" label="供应商" width="150">
      </el-table-column>

      <el-table-column sortable prop="orderDate" label="订单日期" width="150">
      </el-table-column>
      <el-table-column sortable prop="delicerDate" label="交货日期" width="150">
      </el-table-column>
      <el-table-column sortable prop="monetary" label="货币" width="150">
      </el-table-column>
      <el-table-column sortable prop="buyerID" label="采购人" width="150">
      </el-table-column>
      <el-table-column sortable prop="pOD" label="交货地点" width="150">
      </el-table-column>
      <el-table-column sortable prop="others" label="备注" width="150">
      </el-table-column>
      <el-table-column sortable prop="operatorID" label="操作员" width="150">
      </el-table-column>
      <el-table-column sortable prop="examinerID" label="审核人" width="150">
      </el-table-column>
      <el-table-column
        sortable
        prop="examineState"
        label="审核状态"
        width="150"
      >
      </el-table-column>
      <el-table-column sortable prop="deal" label="是否完成" width="150">
      </el-table-column>

      <el-table-column
        fixed="right"
        align="center"
        label="操作"
        min-width="100"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="BeginAuditClick(scope.row)"
            >审核</el-button
          >
          <!-- <el-button size="mini" type="text" @click="DeleteData(scope.row)"
            >删除</el-button
          > -->
          <!-- <el-button size="mini" type="text" @click="OpenDialog2(scope.row)"
            >修改</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination
      v-bind:child-msg="pageparm"
      @callFather="callFather"
    ></Pagination>

    <!-- 录入采购订单页面  begin -->
    <el-dialog title="录入采购订单" :visible.sync="Dialog1" width="70%">
      <el-form
        :inline="true"
        :model="SubmitCaiGouOrderForm"
        class="user-search"
      >
        <el-form-item label="订单日期">
          <el-date-picker
            v-model="SubmitCaiGouOrderForm.OrderDate"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="供应商">
          <el-select
            v-model="SubmitCaiGouOrderForm.SupplierID"
            placeholder="请选择供应商"
          >
            <el-option
              v-for="item in Suppliers"
              :key="item.id"
              :label="item.supplierName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="货币">
          <el-select
            v-model="SubmitCaiGouOrderForm.Monetary"
            placeholder="请选择货币"
          >
            <el-option label="人民币" value="人民币"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="采购人">
          <el-select
            v-model="SubmitCaiGouOrderForm.UserInfosId"
            placeholder="请选择采购人"
          >
            <el-option
              v-for="item in list1"
              :key="item.id"
              :label="item.userName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="交货日期">
          <el-date-picker
            v-model="SubmitCaiGouOrderForm.DelicerDate"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="交货地点">
          <el-input
            v-model="SubmitCaiGouOrderForm.POD"
            type="textarea"
            placeholder="请输入交货地点"
          ></el-input>
        </el-form-item>

        <el-form-item label="备注">
          <el-input
            v-model="SubmitCaiGouOrderForm.Others"
            type="textarea"
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            @click="ImportPlan()"
            >导入计划</el-button
          >
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            @click="SaveData()"
            >保存单据</el-button
          >
        </el-form-item>
      </el-form>
      <!--商品明细的列表-->
      <el-table
        size="small"
        :data="AuditedCaigouList"
        highlight-current-row
        v-loading="loading"
        border
        element-loading-text="拼命加载中"
        style="width: 100%"
      >
        <el-table-column align="center" type="selection" width="60">
        </el-table-column>
        <el-table-column
          sortable
          prop="commodityInformationSheetId"
          label="商品编号"
          width="100"
        >
        </el-table-column>
        <el-table-column
          sortable
          prop="productName"
          label="商品名称"
          width="100"
        >
        </el-table-column>
        <el-table-column sortable prop="units" label="单位" width="100">
        </el-table-column>
        <el-table-column sortable prop="model" label="型号" width="100">
        </el-table-column>
        <!-- <el-table-column sortable prop="quantity" label="产地" width="100">
        </el-table-column> -->
        <el-table-column sortable prop="quantity" label="数量" width="100">
        </el-table-column>
        <el-table-column sortable prop="unitPrice" label="单价" width="100">
        </el-table-column>
        <el-table-column sortable prop="quantity" label="金额" width="100">
        </el-table-column>
        <el-table-column
          sortable
          prop="theOriginalInventory"
          label="库存量"
          width="100"
        >
        </el-table-column>
        <el-table-column sortable prop="others" label="备注" width="100">
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 录入采购订单页面  end -->

    <!-- 修改采购订单页面  begin -->
    <el-dialog title="录入采购订单" :visible.sync="Dialog2" width="70%">
      <el-form
        :inline="true"
        :model="UpdateCaiGouOrderForm"
        class="user-search"
      >
        <el-form-item label="订单日期">
          <el-date-picker
            v-model="UpdateCaiGouOrderForm.orderDate"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="供应商">
          <el-select
            v-model="UpdateCaiGouOrderForm.supplierID"
            placeholder="请选择供应商"
          >
            <el-option
              v-for="item in Suppliers"
              :key="item.id"
              :label="item.supplierName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="货币">
          <el-select
            v-model="UpdateCaiGouOrderForm.monetary"
            placeholder="请选择货币"
          >
            <el-option label="人民币" value="人民币"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="采购人">
          <el-select
            v-model="UpdateCaiGouOrderForm.userInfosId"
            placeholder="请选择采购人"
          >
            <el-option
              v-for="item in list1"
              :key="item.id"
              :label="item.userName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="交货日期">
          <el-date-picker
            v-model="UpdateCaiGouOrderForm.delicerDate"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="交货地点">
          <el-input
            v-model="UpdateCaiGouOrderForm.pod"
            type="textarea"
            placeholder="请输入交货地点"
          ></el-input>
        </el-form-item>

        <el-form-item label="备注">
          <el-input
            v-model="UpdateCaiGouOrderForm.others"
            type="textarea"
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            @click="ImportPlan()"
            >获取采购计划明细</el-button
          >
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            @click="UpdateData()"
            >修改单据</el-button
          >
        </el-form-item>
      </el-form>
      <!--商品明细的列表-->
      <el-table
        size="small"
        :data="AuditedCaigouList"
        highlight-current-row
        v-loading="loading"
        border
        element-loading-text="拼命加载中"
        style="width: 100%"
      >
        <el-table-column align="center" type="selection" width="60">
        </el-table-column>
        <el-table-column
          sortable
          prop="commodityInformationSheetId"
          label="商品编号"
          width="100"
        >
        </el-table-column>
        <el-table-column
          sortable
          prop="productName"
          label="商品名称"
          width="100"
        >
        </el-table-column>
        <el-table-column sortable prop="units" label="单位" width="100">
        </el-table-column>
        <el-table-column sortable prop="model" label="型号" width="100">
        </el-table-column>
        <!-- <el-table-column sortable prop="quantity" label="产地" width="100">
        </el-table-column> -->
        <el-table-column sortable prop="quantity" label="数量" width="100">
        </el-table-column>
        <el-table-column sortable prop="unitPrice" label="单价" width="100">
        </el-table-column>
        <el-table-column sortable prop="quantity" label="金额" width="100">
        </el-table-column>
        <el-table-column
          sortable
          prop="theOriginalInventory"
          label="库存量"
          width="100"
        >
        </el-table-column>
        <el-table-column sortable prop="others" label="备注" width="100">
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 修改采购订单页面  end -->

    <!-- 选择审核人页面 begin -->
    <el-dialog title="审核" :visible.sync="AuditDialog" width="50%">
      <el-form ref="form" :model="AuditForm" label-width="150px">
        <el-form-item label="请选择审核人">
          <el-select
            v-model="AuditForm.value"
            @change="AuditChange"
            placeholder="请选择审核人"
          >
            <el-option
              v-for="item in AuditList"
              :key="item.id"
              :label="item.userName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <div v-if="count > 1">
          <el-form-item
            v-for="(item1, index) in ParamterList"
            :key="item1.id"
            :label="item1.Label"
          >
            <el-select
              v-model="item1.AuditValue"
              @change="AuditChange($event, index)"
              placeholder="请选择审核人"
            >
              <el-option
                v-for="item in AuditList"
                :key="item.id"
                :label="item.userName"
                :value="item.id"
              ></el-option>
            </el-select>
            <i class="el-icon-delete" @click="DelAudit(item1, index)"></i>
          </el-form-item>
          <el-form-item> </el-form-item>
        </div>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="AuditDialog = false">取 消</el-button>

        <el-button type="primary" @click="AddAudit">添加新的审核人</el-button>
        <el-button type="primary" @click="SaveAuditClick">开始审核</el-button>
      </span>
    </el-dialog>
    <!-- 选择审核人页面 end -->
  </div>
</template>

<script>
import Pagination from "../../components/Pagination";

import {
  AddAuditLogging,
  ImportPlanList,
  SupplierList,
  userList,
  AddCaiGouOrder,
  CaiGouOrderList,
  DeleteCaigouOrder,
  UpdateCaigouOrder,
  CaiGouOrder,
} from "../../api/likai";

export default {
  data() {
    return {
      //独有数据 begin==========================
      AuditedCaigouList: [], //已审核的采购列表
      //提交采购订单的表单
      SubmitCaiGouOrderForm: {
        SupplierID: "", //供应商
        OrderDate: "", //订单日期
        DelicerDate: "", //交货日期
        Monetary: "", //货币
        UserInfosId: "", //采购人
        POD: "", //交货地点
        Others: "", //备注
        OperatorID: sessionStorage.getItem('userId'), //操作员
        ExaminerID: "", //审核人
        ExamineState: "0", //审核状态
        Deal: "0", //是否完成
        CaigouOrderDetailDtos: [], //采购订单明细列表
      },
      UpdateCaiGouOrderForm: {
        SupplierID: "", //供应商
        OrderDate: "", //订单日期
        DelicerDate: "", //交货日期
        Monetary: "", //货币
        UserInfosId: "", //采购人
        POD: "", //交货地点
        Others: "", //备注
        OperatorID: "", //操作员
        ExaminerID: "", //审核人
        ExamineState: "0", //审核状态
        Deal: "0", //是否完成
        CaigouOrderDetailDtos: [], //采购订单明细列表
      },
      //独有数据end==============================
      //审核开始begin=============================
      ParamterList: [], //添加新的审核人用到的列表
      AuditForm: {
        UserInfosId: "",
        WenJianId: "",
        Idea: "",
        Reorder: "",
        AuditStatus: "",
        CreateTime: "",
        UserInfosIdList: [],
      },
      AuditorList: [],
      AuditList: [],
      count: 2, //控制审核认的数量
      AuditDialog: false, //控制审核对话框的显示与隐藏
      //审核结束==============================

      //公共数据begin================================
      UserInfosId: "",
      form: {},
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      // rules表单验证
      rules: {
        deptName: [
          { required: true, message: "请输入部门名称", trigger: "blur" },
        ],
        deptNo: [
          { required: true, message: "请输入部门代码", trigger: "blur" },
        ],
      },
      formInline: {
        Page: 1,
        Limit: 10,
        BeginTime:"",
        EndTime:"",
        Name:""
        // token: localStorage.getItem("logintoken")
      },

      userparm: [], //搜索权限
      listData: [], //用户数据
      ShopList: [], //商品数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },

      //辅助数据begin=============================

      //辅助数据1   采购人
      list1: [],
      //辅助数据2   供应商
      Suppliers: [], //供应商列表

      //辅助数据end===============================

      //对话框begin=================================

      //对话框1
      Dialog1: false,
      Dialog2: false,
      Dialog3: false,
      Dialog4: false,
      Dialog5: false,

      //对话框end=================================

      //公共数据end================================
    };
  },
  // 注册组件
  components: {
    Pagination,
  },
  created() {
    this.getdata(this.formInline);
    this.UserInfosId = localStorage.getItem("UserInfosId");
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    TestClick() {
      this.getdata();
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage;
      this.formInline.limit = parm.pageSize;
      this.getdata(this.formInline);
    },
    // 搜索事件
    search() {
      this.getdata(this.formInline);
    },

    //=========================================================================
    //获取数据的方法，多条件查询，分页
    getdata(parameter) {
      //参数
      this.loading = true;
      // CaiGouOrderList(parameter.Page,parameter.List,parameter.BeginTime,parameter.EndTime,parameter.Name)
      console.log(parameter);
      CaiGouOrderList(parameter)
        .then((res) => {
          this.loading = false;
          this.listData = res;
          if (!res.success) {
            this.$message({
              type: "info",
              message: res.msg,
            });
          } else {
            this.listData = res.data;
            // 分页赋值
            this.pageparm.currentPage = this.formInline.page;
            this.pageparm.pageSize = this.formInline.limit;
            this.pageparm.total = res.count;
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error("获取数据失败，请稍后再试！");
        });
    },
    //添加数据的方法
    SaveData(parameter) {
      this.SubmitCaiGouOrderForm.OperatorID = sessionStorage.getItem("userId");
      parameter = this.SubmitCaiGouOrderForm;
      AddCaiGouOrder(parameter)
        .then((res) => {
          if (res.success) {
            this.$message({
              type: "success",
              message: res.msg,
            });
            this.CloseDialog1();
            this.getdata(this.formInline);
          } else {
            this.$message({
              type: "info",
              message: res.msg,
            });
          }
        })
        .catch((err) => {
          this.$message.error("获取失败，请稍后再试！");
        });
    },
    //删除数据的方法
    DeleteData(parameter) {
      DeleteCaigouOrder(parameter.id)
        .then((res) => {
          if (res.success) {
            this.$message({
              type: "success",
              message: res.msg,
            });
            this.getdata();
          } else {
            this.$message({
              type: "info",
              message: res.msg,
            });
          }
        })
        .catch((err) => {
          this.$message.error("获取失败，请稍后再试！");
        });
    },
    //修改数据的方法
    UpdateData(parameter) {
      this.UpdateCaiGouOrderForm.OperatorID = this.UserInfosId;
      parameter = this.UpdateCaiGouOrderForm;
      UpdateCaigouOrder(parameter.id, parameter)
        .then((res) => {
          if (res.success) {
            this.$message({
              type: "success",
              message: res.msg,
            });
          } else {
            this.$message({
              type: "info",
              message: res.msg,
            });
          }
        })
        .catch((err) => {
          this.$message.error("获取失败，请稍后再试！");
        });
    },
    //=====================================================================
    //获取辅助数据的方法1
    GetAssistDate1() {
      userList()
        .then((res) => {
          this.list1 = res;
        })
        .catch((err) => {});
    },
    //获取辅助数据的方法2
    GetAssistDate2() {
      SupplierList()
        .then((res) => {
          this.Suppliers = res;
        })
        .catch((err) => {});
    },
    //获取辅助数据的方法3
    ImportPlan() {
      ImportPlanList()
        .then((res) => {
          if (res == null) {
          } else {
            this.AuditedCaigouList = res;
            this.SubmitCaiGouOrderForm.CaigouOrderDetailDtos = res;
          }
        })
        .catch();
    },
    //获取辅助数据的方法4
    GetAssistDate4() {
      GetDate()
        .then((res) => {})
        .catch((err) => {});
    },
    //获取辅助数据的方法5
    GetAssistDate5() {
      GetDate()
        .then((res) => {})
        .catch((err) => {});
    },
    //==================================================================================
    //打开对话框的方法
    //打开对话框1
    OpenDialog1() {
      this.Dialog1 = true;
      this.GetAssistDate1();
      this.GetAssistDate2();
    },

    //打开对话框2
    OpenDialog2(row) {
      this.ImportPlan();
      CaiGouOrder(row.id)
        .then((res) => {
          if (res.success) {
            this.UpdateCaiGouOrderForm = res.data;
          } else {
            this.$message({
              type: "info",
              message: res.msg,
            });
          }
        })
        .catch((err) => {
          this.$message.error("获取失败，请稍后再试！");
        });
      this.GetAssistDate1();
      this.GetAssistDate2();
      this.Dialog2 = true;
    },
    //打开对话框3
    OpenDialog3() {
      this.AddPlanDetialDialog = true;
      this.GetAssistDate1();
      this.GetAssistDate2();
      this.GetAssistDate3();
    },
    //打开对话框4
    OpenDialog4() {
      this.AddPlanDetialDialog = true;
      this.GetAssistDate1();
      this.GetAssistDate2();
      this.GetAssistDate3();
    },
    //打开对话框5
    OpenDialog5() {
      this.AddPlanDetialDialog = true;
      this.GetAssistDate1();
      this.GetAssistDate2();
      this.GetAssistDate3();
    },
    //========================================
    //关闭对话框1
    CloseDialog1() {
      this.Dialog1 = false;
    },
    //关闭对话框2
    CloseDialog2() {
      this.Dialog2 = false;
    },
    //关闭对话框3
    CloseDialog3() {
      this.Dialog3 = false;
    },
    //关闭对话框4
    CloseDialog4() {
      this.Dialog4 = false;
    },
    //关闭对话框5
    CloseDialog5() {
      this.Dialog5 = false;
    },
    //关闭对话框6
    CloseDialog6() {
      this.CloseDialog6 = false;
    },
    //============================================
    //开始审核   审核的流程开始
    BeginAuditClick(row) {
      console.log("开始审核");
      this.ParamterList = [];
      this.count = 1;
      userList().then((res) => {
        this.AuditList = res;
      });
      console.log("输出一行数据");
      console.log(row);
      this.AuditForm.WenJianId = row.id;
      this.AuditDialog = true;
    },
    AddAudit() {
      this.count = this.count + 1;
      var para = {
        Id: this.count,
        Label: `请选择审核人`,
        AuditValue: `请选择审核人`,
      };
      this.ParamterList.push(para);
    },
    DelAudit(item, index) {
      console.log(index);
      this.ParamterList.splice(index, 1);
      this.count = this.count - 1;
      this.AuditorList.splice(index, 1);
      console.log(this.AuditorList);
    },
    SaveAuditClick() {
      console.log(this.AuditForm);
      this.AuditForm.UserInfosIdList = this.AuditorList;
      AddAuditLogging(this.AuditForm)
        .then((res) => {
          if (res == null) {
            this.$message({
              type: "info",
              message: "添加审核记录失败",
            });
          } else {
            this.$message({
              type: "success",
              message: "添加审核记录成功",
            });
            this.getdata();
          }
        })
        .catch();
      this.AuditDialog = false;
    },
    AuditChange(item, index) {
      if (this.AuditorList.length < this.count) {
        this.AuditorList.push(item);
      } else {
        this.AuditorList.splice(index, 1, item);
      }
      console.log(this.AuditorList);
    },
  },
};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>

 
 